<template>
	<view>
		<view>
			<view class="box padding-xs">
				<view class="search">
					<view class="flex justify-around" >
						<view class="searchinput">
							<view class="searchText"><input type="text"  placeholder="请输入关键词搜索" v-model="kwd"></view>
							<view style="height: 1.5em;width: 1px;border-left: 1px solid #ddd;" ></view>
							<image style="width: 64rpx;padding-left: 4px;height: 64rpx" src="@/static/img/Search.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="falls">
				<view class="scroll-left">
					<scroll-view  scroll-y class="scroll" >
						<view @click="clcikType(item.type,index)" class="menu" :class="index==currentTab1?'click':''" v-for="(item,index) in typeLists" :key="index" >{{item.type}}</view>
					</scroll-view>
				</view>
				<view class="scroll-right">
					<scroll-view  scroll-y class="scroll" @scrolltolower="toLower">
						<view class="contract" v-for="(v,index) in fileLists" :key="index">
							<view class="contract-info" @click="download(v)">
								<view class="contract-name">{{v.no+'.'+v.name}}</view>
								<view class="flex justify-between flex-wrap">
									<view class="contract-fileSize">文件大小：{{v.size}}</view>
									<view style="width: 58%;" class="contract-fileSize text-cut">适用说明：{{v.scene}}</view>
								</view>
							</view>
						</view>
						<uni-load-more view-width="80" :status="status" />
					</scroll-view>
				</view>
			</view>
		</view>
		<view  @click="share()" class="shares">
			<view class="share-btn">我要分享</view>
			<button open-type="share" ></button>
		</view>
		<view class="cu-modal" :class="modalName=='moban'?'show':''" >
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content" style="color: #FE4C4C;font-weight: 600;">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="color:black;text-align: left;">
					<view style="text-align: left;" >你还没有该模块的查看或使用权限，可以立即充值或兑换该模块的权限。</view>
				</view>
				<view class="cu-bar bg-white text-bold " style="position: relative;width: 100%;">
					<view style="width: 50%;" class="text-red text-center" @tap="hideModal">取消</view>
					<view style="position: absolute;left: 50%;height: 1.5em;width: 1px;border-left: 1px solid black;" ></view>
					<view style="width: 50%;" class="text-green text-center" @tap="gobuy('/pages/tabbar/tabbar-4/Openmembership?head=vip')">购买或兑换</view>
				</view>
			</view>
		</view>
    <goReg  ref="goReg" :contentHeight="580" @eventBind="onBind"></goReg>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName:null,
				shareName:'',
				current: 0,
				status: 'nomore',
				uId:null,
				imgUrl: this.$FILE_URL,
				TabCur:0,
				scrollLeft:0,
				Collectionlist:[],
				tabArray:[],
				search: '',
				kwd: '',
				page: 1,
        sys_state:0,
				total: 0,
				limit: 10,
				fileLists:[],
				typeLists:[],
				targets:['','model','file','contract','template'],
				type:'',
        target:'',
				userInfo:null,
				currentTab0:0,
				currentTab1:0,
				templatePower:0,//查看模板权限
			}
		},
		onLoad(options) {
			console.log(options)
      let target = options.type
      this.target = target
      this.uId = uni.getStorageSync('userId')
      // this.sys_state = uni.getStorageSync('sys_state')

      this.typeList()
      this.setNaviTitle(this.target)
		},
		// onReachBottom() {
		// 	console.log(onReachBottom)
		// },
		onShareAppMessage(res){
			let t = this
			let tid = this.uId
			let url='tid='+tid
			if(t.kwd>''){
				url+=('&kwd='+t.kwd)
			}
			if(t.type>''){
				url+=('&type='+t.type)
			}
			if(t.currentTab0>''){
				url+=('&typeid='+t.currentTab0)
			}
			console.log(url)
			return {
				title: this.shareName,
				path: '/pages/tabbar/tabbar-4/workEssay?'+url
			}
		},
		onShareTimeline(){
			let t = this
			let tid = this.uId
			let url='tid='+tid
			if(t.kwd>''){
				url+=('&kwd='+t.kwd)
			}
			if(t.type>''){
				url+=('&type='+t.type)
			}
			if(t.currentTab0>''){
				url+=('&typeid='+t.currentTab0)
			}
			console.log(url)
			return {
				title: this.shareName,
				path: '/pages/tabbar/tabbar-4/workEssay?'+url
			}
		},
		onShow() {
			let tid = this.uId;
			if(tid!=undefined&&tid>0){
				console.log(tid)
			}
			else{
				this.$refs.goReg.showModal('regModal');
			return
			}
			this.modalName=null
		},
		onReady() {

		},
		methods: {
      setNaviTitle(title) {
        this.arr = [];
        this.pageNum = 1
        switch (title) {
          case '1':
            uni.setNavigationBarTitle({title: '工作范文'})
            break;
          case '3':
            uni.setNavigationBarTitle({title: '合同样本'})
            break;
          case '4':
            uni.setNavigationBarTitle({title: '制度模板'})
            break;
          case '2':
            uni.setNavigationBarTitle({title: '表单样本'})
            break;
          default:
            uni.setNavigationBarTitle({title: '工作范文'})
            break;
        }
      },
			changTabbar(e){
				this.current=e
			},
			onBind(){
				this.uId = uni.getStorageSync('userId')
				this.userInfo=uni.getStorageSync('staffInfo')
				this.list(true)
			},
			toLower(){
				this.page++
				this.list()
			},
			gobuy(url){
				uni.navigateTo({
					url
				})
			},
			hideModal(){
				this.modalName=null
			},
			tabSelect(index,id) {
				this.TabCur =id;
				this.scrollLeft = (index - 1) * 60
			},
			tabChange(e){
				// console.log(e)
				this.type='劳动合同'
				this.currentTab0=0
				this.currentTab1=0
				// this.TabCur=0
				this.current = e
				this.list(true)
			},
			load(status) {
				console.log(status)
				this.status = status
				if (Math.ceil(this.total / this.limit) > this.page) {
					this.page++
					this.list()
				} else {
					this.status = 'noMore'
				}
			},
			share(name) {
				this.shareName = name
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage'],
					success: res => {
						console.log(res);
					},
					fail: err => {
						console.log(res);
					}
				})
			},
			openDoc(item){
        let t = this
				let vaild_num=uni.getStorageSync('vaild_num')
				uni.showLoading({
					title: '打开文档中...',
				});
				uni.downloadFile({
					// this.imgUrl +'/'+ url
					url:this.imgUrl +'/'+item.url,
					// 'https://api.dxsjxzd.com/files/contracttemplate/2022-11-10/02c17ab39cf45cf990eed2d7ebdd5653.docx', //下载地址接口返回
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.setStorageSync('vaild_num',--vaild_num)
							console.log(uni.getStorageSync('vaild_num'),'剩余次数');
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									//打开文档查看
									uni.openDocument({
										filePath: res.savedFilePath,
                    showMenu:t.sys_state>0?true:false, // 是否显示右上角菜单
										success: function(res) {
											uni.hideLoading()
											// console.log('打开文档成功');
										},
										fail(err) {

											uni.showToast({
												icon: 'none',
												mask: true,
												title: '失败请重新下载',
											});
										}
									});
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
			download(item){
				let now_time=Date.parse(new Date())
				let vaild_at=uni.getStorageSync('vaild_at')
				let vaild_num=uni.getStorageSync('vaild_num')
				let tid = this.uId;
				// let vipType = []
				// let vaild_date=[]
				// this.userInfo.vip.forEach(el => {
				// 	// if(el.vip_type==1){
				// 		vipType.push(el.vip_id)
				// 		vaild_date.push(el)
				// 	// }
				// })
				// let vip1=false
				// vaild_date.forEach(el=>{
				// 	if(el.vip_id==1&&Date.parse(el.end_time)>now_time){
				// 		vip1=true
				// 	}
				// })
				// let vip5=false
				// vaild_date.forEach(el=>{
				// 	if(el.vip_id==5&&Date.parse(el.end_time)>now_time){
				// 		vip5=true
				// 	}
				// })
				// //游客
				// let vip15=false
				// vaild_date.forEach(el=>{
				// 	if(el.vip_id==15&&Date.parse(el.end_time)>now_time){
				// 		vip15=true
				// 	}
				// })
        //
				if(tid!=undefined&&tid>0){
          this.openDoc(item)
					// if(now_time<vaild_at&&vaild_num>0){
					// 	if(vaild_num==3){
					// 		setTimeout(()=>{
					// 			uni.switchTab({
					// 				url:'/pages/tabbar/tabbar-2/corporate',
					// 				fail(e) {
					// 					console.log(e);
					// 				}
					// 			})
					// 		},1500)
					// 		uni.setStorageSync('vaild_num',--vaild_num)
					// 		uni.showToast({
					// 			title:'进入小程序查阅更多信息',
					// 			mask:true,
					// 			icon:'none'
					// 		})
					// 		return
					// 	}
					// 	this.openDoc(item)
					// }
				  // else if(this.templatePower>1){
					// 	this.openDoc(item)
					// }
				  // else if(vip15){
					// 	this.openDoc(item)
					// }
				  // else{
					// 	let vipType=[]
					// 	this.userInfo.vip.forEach(el=>{
					// 		vipType.push(el.vip_id)
					// 	})
					// 	if(vip5||vip1){
          //
					// 	}else{
					// 		return this.modalName='moban'
					// 	}
					// 	console.log(this.userInfo,now_time,vaild_at);
					// 	this.openDoc(item)
					// }
				}
				else{
				  this.$refs.goReg.showModal('regModal');
				  return
				}


			},
			async cancelCollection(item) {
				const field = {
					id: item.id
				}
				const result = await this.$http.post('cancel', field)
				// this.list()
				uni.showToast({
					title: '取消收藏',
					duration: 1500
				});
				item.collect = 0;
				item.collection_id = ''

			},

			async Favoritesbutton(item){
        let tid = this.uId;
        if(tid!=undefined&&tid>0){
          console.log(tid)
        }
        else{
          this.$refs.goReg.showModal('regModal');
          return
        }
				const Subsidycollection = {
						// user_id: this.uId,
						// target_id: item.id,
						// target: 'data_file',
						// type:  item.type,
						user_id: this.uId,
						target_id: item.id,
						target: 'contracttemplate',
						type:  item.type,
				    }
				    let result = await this.$http.post('check', Subsidycollection)
					// this.list()
					item.collect = true;
					item.collection_id = result.id
					uni.showToast({
						title: '收藏成功',
						duration: 1500
					});
			},
			clcikType(type,i){
				this.currentTab1 = i
				this.type=type
				this.page = 1
				this.total = 0
				this.list(true)
			},
			async list(refush){
				if(refush){
					this.fileLists=[]
				}
				this.page = refush?1:this.page;
				let param = {
					kwd: this.kwd,
					// page: this.page,
					target:this.targets[this.target],
					type:this.type,
					// limit: this.limit,
					status:1,
				};
				this.status = 'loading'
				this.search=''
				let data = await this.$http.post(
					'wx/dataList', //可以直接放链接(将不启用全局定义域名)
					param,
				)
        console.log(data)
				if (data.length > 0) {
					this.fileLists.push(...data)

				} else {
					this.status = 'nomore'
					this.page--
				}
			},
		async typeList(){
			let param = {
				target: this.target,
			};
			let data = await this.$http.post(
				'wx/dataTypeList', //可以直接放链接(将不启用全局定义域名)
				param,
			)
			console.log(data,'data');
			if (this.type == ''&&data.length>0) {
				this.type = data [0].type
			}

			this.list(true)
			this.typeLists = data
		}
		},
	}
</script>

<style lang="scss">
	.click{
		background-color: #3744F0;
		// background-image: linear-gradient(#353FF0,#60CFFC);
		color: #FFFFFF !important;
	}
	page{
		background:#fff;
	}
	.scroll{
		height:calc(100vh - env(safe-area-inset-bottom) - 235rpx);
		// border-bottom: 1px solid #d9d9d9;
	}
	.shares{
		width: 100%;
		height: 112rpx;
		background-color: #fff;
		box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.03);
		position: fixed;
		bottom: 0;
		z-index: 1;
		.share-btn{
			width: 94%;
			margin:2.5% 3%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 8rpx;
			z-index: 2;
			background-color: #3744F0;
		}
		button{
			position: absolute;
			opacity: 0;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 5;
			border: 1px solid #000;
		}
	}
	.box{
		width: 100vw;
		z-index: 3;
		position: fixed;
		background-color: #fff;
		height: 7.5%;
		top: 0;
		.search {
			width: 96%;
			margin: 1% 2% 0 2%;
			height: 100%;
			display: flex;
			align-items: center;
			background-color: rgb(247, 249, 250);
			border-radius: 10rpx;
			.flex{
				width: 100%;
			}
			.btn{
				width: 30%;
				height: 100%;
				button {
					border-radius: 0 20px 20px 0;
					background-color: #FFAF24;
					color: #fff;
					font-size: 15px;
					height: 100%;
					padding-right: 10px;
				}
			}
			.searchinput {
				flex: 1;
				// border-left: 2rpx solid #CBCBCB;
				display: flex;
				align-items: center;
				padding:0 20rpx;
				.searchimg {
					margin-right: 16rpx;
					margin-left: 22rpx;
					.cuIcon-search{
						transform: scale(1.5);
						color:#999;
					}
				}
				.searchText {
					flex: 1;
					input {
						font-size: 28rpx;
						// padding-left: 8px;
					}
				}
			}
		}
	}

	.falls{
		width:100%;
		height:calc(100vh - 224rpx);
		display:flex;
		background: #FFFFFF;
		margin-top: 126rpx;
		.scroll-left{
			width:220rpx;
			.menu{
				font-size: 32rpx;
				color: #333333;
				height:100rpx;
				text-align: center;
				line-height: 100rpx;
				font-weight: bold;
				// border-top: 0;
				border-right: 1px solid #cccccc;
				border-bottom: 1px solid #cccccc;
			}
		}
		.scroll-right{
			width: 528rpx;
			.contract{
				border-bottom: 1px solid #cccccc;
				border-radius: 0;
				display: flex;
				align-items:center;
				padding: 15rpx;
				height: 138rpx;
				.contract-info{
					// padding: 10rpx;
					width: 100%;
					.contract-name{
						font-size: 28rpx;
						color: rgba(0,0,0, .9);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					.flex-wrap{
						margin-top: 24rpx;
					}
					.contract-fileSize{
						font-size: 24rpx;
						color: rgba(0,0,0, .3);
					}
				}

				.collection{
					width: 38rpx;
					height: 32rpx;


				}
				.collection1{
					width: 38rpx;
					position: relative;
					height: 32rpx;
					image{
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;

					}
					button{
						position: absolute;
						opacity: 0;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						z-index: 5;
						border: 1px solid #000;
					}
				}
			}
		}
	}
</style>

